<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Sharrre.com</title>
  <meta name="description" content="Sharrre" />
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script src="jquery.sharrre-1.3.4.js"></script>
  <script>
  $(function(){
    $('#demo1').sharrre({
      share: {
        googlePlus: true,
        facebook: true,
        twitter: true,
        delicious: true
      },
      buttons: {
        googlePlus: {size: 'tall'},
        facebook: {layout: 'box_count'},
        twitter: {count: 'vertical'},
        delicious: {size: 'tall'}
      },
      hover: function(api, options){
        $(api.element).find('.buttons').show();      
      },
      hide: function(api, options){
        $(api.element).find('.buttons').hide();
      }
    });
    
    $('#demo2').sharrre({
      share: {
        googlePlus: true,
        facebook: true,
        twitter: true
      },
      url: 'http://sharrre.com',
      enableHover: false
    });
  });
  </script>
  <style type="text/css">
  #demo1.sharrre {
    width:100%;
    display:inline-block;
  }
  #demo2.sharrre {
    width:50px;
  }
  .sharrre .box{
    float:left;
  }
  .sharrre .count {
    color:#444444;
    display:block;
    font-size:17px;
    line-height:34px;
    height:34px;
    padding:4px 0;
    position:relative;
    text-align:center;
    text-decoration:none;
    width:50px;
    background-color:#eee;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px; 
  }
  .sharrre .share {
    color:#FFFFFF;
    display:block;
    font-size:11px;
    height:16px;
    line-height:16px;
    margin-top:3px;
    padding:0;
    text-align:center;
    text-decoration:none;
    width:50px;
    background-color:#9CCE39;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px; 
  }
  .sharrre .buttons {
    display:none;
    float:left;
    width:300px;
  }
  .sharrre .button {
    float:left;
    max-width:50px;
    height:50px;
    margin-left:10px;
  }
</style>
</head>
<body>
  <h1>Sharrre demo</h1>
  <div id="demo1" data-title="sharrre" data-url="http://sharrre.com" ></div>
  <br /><br />
  <div id="demo2"></div>
</body>
</html>

